// ProgramTable.vue

<template>
  <div>
    <el-input
      v-model="query.id"
      placeholder="id"
      class="handle-input"
    ></el-input>
    <el-input
      v-model="query.thumbnail"
      placeholder="缩略图"
      class="handle-input"
    ></el-input>
    <el-input
      v-model="query.programName"
      placeholder="节目名称"
      class="handle-input"
    ></el-input>
    <el-input
      v-model="query.resolutionRatio"
      placeholder="分辨率"
      class="handle-input"
    ></el-input>
    <el-input
      v-model="query.duration"
      placeholder="节目时长"
      class="handle-input"
    ></el-input>
    <el-input
      v-model="query.programSize"
      placeholder="节目大小"
      class="handle-input"
    ></el-input>
    <el-input
      v-model="query.status"
      placeholder="节目状态"
      class="handle-input"
    ></el-input>
    <el-input
      v-model="query.author"
      placeholder="作者"
      class="handle-input"
    ></el-input>
    <el-input
      v-model="query.updateTime"
      placeholder="更新时间"
      class="handle-input"
    ></el-input>
    <el-button type="primary" icon="el-icon-search" @click="handleSearch"
      >搜索</el-button
    >
    <el-form
      :inline="true"
      :model="submitData"
      class="demo-form-inline"
      :rules="rules"
      ref="ruleForm"
    >
      <el-card class="box-card">
        <div class="header clearfix">
          <span>program</span>
          <el-button
            v-if="!ischeck && !isFind"
            class="fr"
            type="primary"
            @click="validate('ruleForm')"
            >提交</el-button
          >
          <el-button v-else class="fr" type="primary" @click="goBack"
            >返回</el-button
          >
        </div>
        <el-form-item label="id" prop="id">
          <el-input placeholder="请输入id" v-model="formData.id"></el-input>
        </el-form-item>
        <el-form-item label="缩略图" prop="thumbnail">
          <el-input
            placeholder="请输入缩略图"
            v-model="formData.thumbnail"
          ></el-input>
        </el-form-item>
        <el-form-item label="节目名称" prop="programName">
          <el-input
            placeholder="请输入节目名称"
            v-model="formData.programName"
          ></el-input>
        </el-form-item>
        <el-form-item label="分辨率" prop="resolutionRatio">
          <el-input
            placeholder="请输入分辨率"
            v-model="formData.resolutionRatio"
          ></el-input>
        </el-form-item>
        <el-form-item label="节目时长" prop="duration">
          <el-input
            placeholder="请输入节目时长"
            v-model="formData.duration"
          ></el-input>
        </el-form-item>
        <el-form-item label="节目大小" prop="programSize">
          <el-input
            placeholder="请输入节目大小"
            v-model="formData.programSize"
          ></el-input>
        </el-form-item>
        <el-form-item label="节目状态" prop="status">
          <el-input
            placeholder="请输入节目状态"
            v-model="formData.status"
          ></el-input>
        </el-form-item>
        <el-form-item label="作者" prop="author">
          <el-input
            placeholder="请输入作者"
            v-model="formData.author"
          ></el-input>
        </el-form-item>
        <el-form-item label="更新时间" prop="updateTime">
          <el-input
            placeholder="请输入更新时间"
            v-model="formData.updateTime"
          ></el-input>
        </el-form-item>
      </el-card>
    </el-form>

    <div class="container">
      <el-button @click="loadList">刷新</el-button>
      <el-table
        :data="tableData"
        border
        class="table"
        ref="multipleTable"
        header-cell-class-name="table-header"
      >
        <el-table-column prop="id" label="id" align="center"></el-table-column>
        <el-table-column prop="id" label="id" align="center"></el-table-column>
        <el-table-column
          prop="thumbnail"
          label="缩略图"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="programName"
          label="节目名称"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="resolutionRatio"
          label="分辨率"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="duration"
          label="节目时长"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="programSize"
          label="节目大小"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="status"
          label="节目状态"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="author"
          label="作者"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="updateTime"
          label="更新时间"
          align="center"
        ></el-table-column>
        <el-table-column label="操作" width="120" align="center" fixed="right">
          <template v-slot="scope">
            <el-button
              type="text"
              icon="el-icon-edit"
              @click="handleEdit(scope.$index, scope.row)"
              >编辑
            </el-button>
                <el-button
              type="text"
              icon="el-icon-edit"
              @click="publish(scope.$index, scope.row)"
              >发布
            </el-button>
            <el-button
              type="text"
              icon="el-icon-delete"
              class="red"
              @click="handleDelete(scope.$index, scope.row)"
              >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page="pageParam.pageIndex"
          :page-size="pageParam.pageSize"
          :total="pageTotal"
          @current-change="load"
        >
        </el-pagination>
      </div>

      <el-dialog
        class="edit-dialog"
        title="编辑"
        v-model="editVisible"
        width="30%"
      >
        <el-form ref="formEdit" :model="formEdit" label-width="110px">
          <el-form-item label="id">
            <el-input v-model="formEdit.id"></el-input>
          </el-form-item>
          <el-form-item label="缩略图">
            <el-input v-model="formEdit.thumbnail"></el-input>
          </el-form-item>
          <el-form-item label="节目名称">
            <el-input v-model="formEdit.programName"></el-input>
          </el-form-item>
          <el-form-item label="分辨率">
            <el-input v-model="formEdit.resolutionRatio"></el-input>
          </el-form-item>
          <el-form-item label="节目时长">
            <el-input v-model="formEdit.duration"></el-input>
          </el-form-item>
          <el-form-item label="节目大小">
            <el-input v-model="formEdit.programSize"></el-input>
          </el-form-item>
          <el-form-item label="节目状态">
            <el-input v-model="formEdit.status"></el-input>
          </el-form-item>
          <el-form-item label="作者">
            <el-input v-model="formEdit.author"></el-input>
          </el-form-item>
          <el-form-item label="更新时间">
            <el-input v-model="formEdit.updateTime"></el-input>
          </el-form-item>
        </el-form>
        <span class="dialog-footer">
          <el-button
            @click="
              editVisible = false;
              getData();
            "
            >取 消</el-button
          >
          <el-button type="primary" @click="saveEdit">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
// import method from "@/utils/method";
// import Common from "@/common/common";
// import Commen from "../utils/common";
import axios from "axios";
import Commen from "@/utils/common";
export default {
  name: "ProgramTable",
  components: {},
  data() {
    return {
      submitData: {},
      ischeck: false,
      isFind: false,
      tableName: "program",
      formData: {
        id: "",
        thumbnail: "",
        programName: "",
        resolutionRatio: "",
        duration: "",
        programSize: "",
        status: "",
        author: "",
        updateTime: "",
      },
      value: "选项1",
      editVisible: false,
      form: [],
      formEdit: [],
      query: {
        // uname: "",
        // pname: "",
        // pageIndex: 1,
        // pageSize: 10

        id: null,
        thumbnail: null,
        programName: null,
        resolutionRatio: null,
        duration: null,
        programSize: null,
        status: null,
        author: null,
        updateTime: null,
        pageIndex: 1,
        pageSize: 10,
      },
      pageParam: {
        pageNumber: 0,
        pageSize: 10,
      },
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        importance: undefined,
        title: undefined,
        type: undefined,
        sort: "+id",
      },
      sortOptions: [
        { label: "ID Ascending", key: "+id" },
        { label: "ID Descending", key: "-id" },
      ],
      statusOptions: ["published", "draft", "deleted"],
      showReviewer: false,
      temp: {
        id: undefined,
        importance: 1,
        remark: "",
        timestamp: new Date(),
        title: "",
        type: "",
        status: "published",
      },
      dialogFormVisible: false,
      dialogStatus: "",
      textMap: {
        update: "Edit",
        create: "Create",
      },
      dialogPvVisible: false,
      pvData: [],
      rules: {
        type: [
          { required: true, message: "type is required", trigger: "change" },
        ],
        timestamp: [
          {
            type: "date",
            required: true,
            message: "timestamp is required",
            trigger: "change",
          },
        ],
        title: [
          { required: true, message: "title is required", trigger: "blur" },
        ],
      },
      downloadLoading: false,
      tableData: [],
      pageTotal: 0,
    };
  },
  created() {
    this.loadList();
  },
  methods: {
    handleSearch() {
       this.  loadList()
    //   let params = this.pageParam;
    //   let data = this.query;
    //   let url = Commen.baseURL + `/${this.tableName}/listLike`;
    //   axios({
    //     url: url,
    //     method: "post",
    //     data: data, // body参数
    //     params: params, // query参数
    //   }).then((response) => {
    //     this.loadList();
    //   });
    },
    editCancel() {
      this.editVisible = false;
      // getData()
      this.loadList();
    },

    handleEdit(index, row) {
      this.idx = index;
      // this.form = row;
      this.formEdit = row;
      this.editVisible = true;
    },
    saveEdit() {
      axios
        .post(Commen.baseURL + `/${this.tableName}/save`, this.formEdit)
        .then((response) => {
          this.editVisible = false;
          this.loadList();
        })
        .catch(function (error) {
          console.log(error);
        });
    },
     publish(index, row) {
        // this.$router.push()
        // this.$router.push({ name: 'PlanTable', params: { programId: row.id }})
        // 发布节目
         
// 带查询参数，变成/backend/order?selected=2
this.$router.push({path: 'PlanTable', query: {programId: row.id }});
    //   let params = { id: row.id };
    //   let data = {};
    //   let url = Commen.baseURL + `/${this.tableName}/delete`;
    //   axios({
    //     url: url,
    //     method: "post",
    //     data: data, // body参数
    //     params: params, // query参数
    //   })
    //     .then((response) => {
    //       this.loadList();
    //     })
    //     .catch(function (error) {
    //       console.log(error);
    //     });
    },
    handleDelete(index, row) {
      let params = { id: row.id };
      let data = {};
      let url = Commen.baseURL + `/${this.tableName}/delete`;
      axios({
        url: url,
        method: "post",
        data: data, // body参数
        params: params, // query参数
      })
        .then((response) => {
          this.loadList();
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    validate(ruleForm) {
      let params = {};
      let data = this.formData;
      let url = Commen.baseURL + `/${this.tableName}/save`;
      axios({
        url: url,
        method: "post",
        data: data, // body参数
        params: params, // query参数
      })
        .then((response) => {
          console.log("response");
          console.log(response);
          this.$message.success("提交成功！");
          this.loadList();
        })
        .catch((error) => {
          console.log(error);
          this.$message.error("提交失败！" + error);
        });
    },
    loadList() {
      let params = this.pageParam;
      // let data={}
      let data = this.query;
      console.log("data 加载");
           console.log(data);
      // let url=Commen.baseURL+`/${this.tableName}/list`
      let url = Commen.baseURL + `/${this.tableName}/listLike`;
      axios({
        url: url,
        method: "post",
        data: data, // body参数
        params: params, // query参数
      })
        .then((response) => {
          // let content = response.data.content
          let content = response.data.data.content;
          this.tableData = content;
          // this.pageTotal = response.data.pageable.pageSize;
          this.pageTotal = response.data.totalElements;
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    loadById(id) {
      axios
        .post(Commen.baseURL + `/${this.tableName}/load`, this.pageParam)
        .then((response) => {
          let content = response.data.content;
          this.tableData = content;
          this.pageTotal = response.data.totalElements;
        })
        .catch((error) => {
          console.log(error);
        });
    },

    load(val) {
      this.pageParam.pageNumber = val - 1;
      this.loadList();
    },
  },
};
</script>

<style scoped>
.pagination {
  margin: 20px 0;
  text-align: right;
}

.container {
  padding: 30px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
}
</style>